<template>
  <el-dialog v-model="showDialog" title="商品选择器" append-to-body width="1100px" :close-on-click-modal="false">
    <slot name="search"></slot>
    <layout-table ref="goodsTableRef" :url="props.tableUrl" disable-auto-height :param="props.tableParam" :hide-watch="true" :set-search="setSearch">
      <el-table-column label="商品图片" min-width="110">
        <template #default="scope">
          <div style="width: 100px; height: 100px" class="flex-center">
            <el-image style="max-width: 100px; max-height: 100px" :src="scope.row.thumbnailUrl"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品" min-width="240">
        <template #default="scope">
          <div class="goods-content">
            <div class="goods-name">{{ scope.row.name }}</div>
            <div class="goods-info">
              <div class="goods-price">
                供货价：<span class="highlight">￥{{ scope.row.priceInterval }}</span>
              </div>
              <div class="goods-amount">
                库存：<span class="highlight">{{ scope.row[stock] }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" min-width="150">
        <template #default="scope">
          {{ getProductType(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column label="商家名称" prop="storeName" min-width="150">
      </el-table-column>
      <el-table-column label="商品状态" min-width="100">
        <template #default="scope">
          {{ scope.row[stock] > 0 ? "出售中" : "无库存" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120">
        <template #default="scope">
          <el-button type="primary" @click="selectGoods(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </layout-table>

    <template #footer>
      <el-button type="primary" @click="showDialog = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElTable } from "element-plus";
import { IStoreGoodsPageRow } from "@/api/modules/pointsMall";
import { useGetGoodsType } from "@/components/goodsCenter/compositions/useGetGoodsType";

const props = withDefaults(
  defineProps<{
    show: boolean;
    tableUrl: string;
    tableParam: any;
    stock?: string;
  }>(),
  {
    stock: "totalStock",
  }
);
const setSearch=ref(0)
const search=()=>{
  setSearch.value++
}
const emits = defineEmits(["update:show", "confirm", "cancel", "select"]);
const store = useStore();
const router = useRouter();

const goodsTableRef = ref<InstanceType<typeof ElTable>>();
const { getProductType } = useGetGoodsType();

const showDialog = computed({
  get() {
    return props.show;
  },
  set(val) {
    return emits("update:show", val);
  },
});

const selectGoods = (rowData: IStoreGoodsPageRow) => {
  emits("select", rowData);
};
defineExpose({
  search
})
</script>

<style scoped lang="scss">
.goods-content {
  padding: 5px 0;

  .goods-name {
    margin-bottom: 10px;
  }

  .goods-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;

    .goods-amount {
      max-width: 50%;
      min-width: 90px;
      margin-left: 4px;
    }
  }

  .highlight {
    color: var(--el-color-warning-dark-2);
  }
}

.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;

  .left {
    display: flex;
    align-items: center;

    .block {
      padding: 0 10px;
    }
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
